<template>
    <Drawer title="微信用户选择" :closable="false" v-model="show" width="500" class="drawer">
        <div class="content">
            <Row class="search-row">
                <Input suffix="ios-search" v-model="searchForm.nickname" placeholder="请输入关键字" class="search-input" @input="getDataList"/>
                <Button @click="handleReset" type="default">重置</Button>
            </Row>
            <Table ref="table" :max-height="tableMaxHeight" :loading="loading" border :columns="columns" :data="data">
            </Table>
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
                     size="small" show-total show-elevator></Page>
            </Row>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="closeModal(false)">关闭</Button>
                <Button type="primary" @click="handleConfirm">确认</Button>
            </div>
        </div>
    </Drawer>
</template>

<script>
import {getWxUserList} from "@/api/hmzd/hmUserAddr";

export default {
    name: "wxUserDrawer",
    props: {
        value: {
            type: Boolean,
            default: true
        },
        modalTitle: {
            type: String,
            default: ""
        },
        checkedId: {
            type: String
        }
    },
    data() {
        return {
            show: this.value,
            title: this.modalTitle,
            loading: false,
            data: [],
            searchForm: {
                pageNumber: 1,
                pageSize: 10,
            },
            total: 0,
            columns: this.getColumns(),
            tableMaxHeight: 200,
            selectItem: ''
        }
    },
    methods: {
        //改变页码
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
        },
        handleConfirm() {
            this.$emit("getSelectedWords", this.selectItem);
            this.closeModal(false);
        },
        handleReset() {
            this.searchForm.nickname = "";
            this.searchForm.pageNumber = 1;
            this.getDataList();
        },
        //把源数据加上_checked字段，遍历已选项数据，更新选中状态
        updateChecked() {
            for (var i = 0; i < this.data.length; i++) {
                this.data[i].checkBox = false;
                if (this.checkedId && this.checkedId == this.data[i].id) {
                    this.data[i].checkBox = true;
                    this.selectItem = JSON.parse(JSON.stringify(this.data[i]))
                }
            }
        },
        getDataList() {
            this.loading = true;
            getWxUserList(this.searchForm).then(res => {
                if (res.success) {
                    this.data = res.data.records;
                    this.total = res.data.total;
                    //this.updateChecked()
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        closeModal(val) {
            this.searchForm.nickname = "";
            this.searchForm.pageNumber = 1;
            this.$emit('input', val);
        },
        getColumns() {
            return [
                {
                    title: '#',
                    align: 'center',
                    key: 'checkBox',
                    width: 60,
                    render: (h, params) => {
                        return h('div', [
                            h('Checkbox', {
                                props: {
                                    value: params.row.checkBox
                                },
                                on: {
                                    'on-change': (e) => {
                                        this.$nextTick(() => {
                                            console.log("2222222222")
                                            console.log(params.row)

                                            this.data.forEach((items) => {      //先取消所有对象的勾选，checkBox设置为false
                                                this.$set(items, 'checkBox', false)
                                            });
                                            this.$forceUpdate();
                                            this.selectItem = {}
                                            if (e) {
                                                this.data[params.index].checkBox = e;
                                                this.selectItem = params.row;
                                            }
                                        })
                                    }
                                }
                            })
                        ])
                    }
                },
                {
                    title: '昵称',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'nickname',
                    sortable: false
                }
            ]
        },
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            if (!val) {
                this.closeModal(val);
            } else {
                // 计算高度
                let height = document.documentElement.clientHeight;
                this.tableMaxHeight = height - 240;
                window.onresize = () => {
                    // 计算高度
                    let height = document.documentElement.clientHeight;
                    this.tableMaxHeight = height - 240;
                };
                this.getDataList();
            }
        }
    }
}
</script>

<style lang="scss">
.drawer {
    .content {
        padding-bottom: 10px;

        .search-row {
            flex-wrap: nowrap;
            align-items: center;
            margin-bottom: 20px;

            .search-input {
                margin-right: 30px;
            }
        }
    }

    .demo-drawer-footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .ivu-drawer-mask, .ivu-drawer-wrap {
        z-index: 2000;
    }
}
</style>
